<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>任务</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <link rel="stylesheet" href="../css/scrollbar.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/iscroll-v4.js"></script>
    <style>
        .header1 .right{position: relative;}
        .header1 .right .dot{position: absolute;right: 10px;top: 10px;width: 8px;height: 8px;background-color: red;border-radius: 8px;}
        #wrapper{position: absolute;left: 0;top: 50px;right: 0;bottom: 102px;overflow: hidden;}
        .content ul{position: relative;}
        .content ul li{overflow: hidden;position: relative;padding: 10px;width: 100%;background-color: #fff;}
        .content ul li a{display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
        .content ul li .left{float: left;width: 60px;height: 60px;border-radius: 60px;background-size: cover;background-position: center}
        .content ul li .center{float: left;margin-left: 15px;font-size: 14px;}
        .content ul li .center .top{}
        .content ul li .center .top .vip-name{color: #e60014;}
        .content ul li .center .top .sex{color: #049cce;}
        .content ul li .center .top .star{color: #fec015;}
        .content ul li .center .middle{color: #999;margin: 5px 0;}
        .content ul li .center .bottom{color: #fec015;}
        .content ul li .right{float: right;color: #999;text-align: right;font-size: 12px;}
        .content ul li .right .top{font-weight: bold;}
        .content ul li .right .top span{color: #fff;padding: 3px;border-radius: 3px;}
        .content ul li .right .top .service{background-color: #a0a0a0;}
        .content ul li .right .top .ding{background-color: #049cce;}
        .content ul li .right .middle{margin: 8px 0;}

        .footer{}
        .order{position: absolute;left: 0;bottom: 52px;width: 100%;height: 50px;background-color: #ffc10c;overflow: hidden;}
        .order .left{float: left;line-height: 50px;width: 50px;text-align: center;}
        .order .left i{font-size: 34px;color: #fff;}
        .order .left i:before{}
        .order .center{position: absolute;left: 60px;right: 60px;top: 0;bottom: 0;text-align: center;font-size: 14px;color: #fff;line-height: 50px;}
        .order .right{float: right;height: 50px;width: 50px;text-align: center;background-color: #a0a0a0;}
        .order .right i{display: inline-block;font-size: 20px;color: #fff;margin-top: 3px;}
        .order .right p{font-size: 12px;color: #fff;margin-top: 2px;}

        .m-content ul{padding: 0 8px;}
        .m-content ul li{display: -webkit-box;display: box;position: relative;font-size: 13px;padding: 15px 0;}
        .m-content ul li .left{width: 70px;text-align: right;color: #ffc10c;}
        .m-content ul li .right{padding-left: 5px;-webkit-box-flex: 1;box-flex: 1;}

    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<!--遮罩-->
<div class="mask"></div>
<!--弹框-->
<div class="modal">
    <div class="modal-inner">
        <div class="modal-box">
            <div class="m-title">抢单成功</div>
            <div class="m-content">
                <ul>
                    <li class="bottom-line">
                        <div class="left">任务类型：</div>
                        <div class="right">生活服务</div>
                    </li>
                    <li class="bottom-line">
                        <div class="left">金额：</div>
                        <div class="right">100元/小时</div>
                    </li>
                    <li class="bottom-line">
                        <div class="left">时间：</div>
                        <div class="right">2015-05-21</div>
                    </li>
                    <li class="bottom-line">
                        <div class="left">地址：</div>
                        <div class="right">成都市高新区天府大道</div>
                    </li>
                </ul>
            </div>
            <div class="m-btn">
                <div class="sure">查看</div>
                <div class="cancel">取消</div>
            </div>
        </div>
    </div>
</div>

    <header class="header header1">
        <div class="header-fixed">
            <div class="left">
                <span>金华</span><i class="iconfont icon-arrowdown"></i>
            </div>
            <div class="center">
                <a class="search" href="../html/search.html">
                    <i class="iconfont icon-search"></i>
                    <span>请输入关键字</span>
                </a>
            </div>
            <div class="right">
                <a href="../html/message.html"><i class="iconfont icon-message"></i></a>
                <span class="dot"></span>
            </div>
        </div>
    </header>

    <div class="content" id="wrapper">
        <div class="list">
            <div id="pullDown">
                <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
            </div>
            <ul id="list" class="top-line">
                <li class="bottom-line">
                    <a href="../html/task_detail.html"></a>
                    <div class="left face" style="background-image: url('../img/pic_renter.png')"></div>
                    <div class="center">
                        <div class="top">
                            <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                            <span class="sex"><i class="iconfont icon-women"></i></span>
                            <span class="star"><i class="iconfont icon-star2"></i></span>
                        </div>
                        <div class="middle">任务标题</div>
                        <div class="bottom">￥280元</div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span class="service">生活服务</span>
                            <span class="ding">顶</span>
                        </div>
                        <div class="middle">1/5</div>
                        <div class="bottom">1小时前</div>
                    </div>
                </li>
                <li class="bottom-line">
                    <a href="../html/task_detail.html"></a>
                    <div class="left face" style="background-image: url('../img/pic_renter.png')"></div>
                    <div class="center">
                        <div class="top">
                            <span class="name">小明</span>
                            <span class="sex"><i class="iconfont icon-women"></i></span>
                            <span class="star"><i class="iconfont icon-star2"></i></span>
                        </div>
                        <div class="middle">任务标题</div>
                        <div class="bottom">￥280元</div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span class="service">生活服务</span>
                            <span class="ding">顶</span>
                        </div>
                        <div class="middle">1/5</div>
                        <div class="bottom">1小时前</div>
                    </div>
                </li>
                <li class="bottom-line">
                    <a href="../html/task_detail.html"></a>
                    <div class="left face" style="background-image: url('../img/pic_renter.png')"></div>
                    <div class="center">
                        <div class="top">
                            <span class="name">小明</span>
                            <span class="sex"><i class="iconfont icon-women"></i></span>
                            <span class="star"><i class="iconfont icon-star2"></i></span>
                        </div>
                        <div class="middle">任务标题</div>
                        <div class="bottom">￥280元</div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span class="service">生活服务</span>
                            <span class="ding">顶</span>
                        </div>
                        <div class="middle">1/5</div>
                        <div class="bottom">1小时前</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

<footer class="footer">
    <div class="footer-fixed">
        <div class="foot-bar">
            <a href="../html/index.html">
                <div>
                    <i class="iconfont icon-home"></i>
                </div>
                <p>首页</p>
            </a>
            <a href="javascript:void(0);" class="active">
                <div>
                    <i class="iconfont icon-renwu"></i>
                </div>
                <p>任务</p>
            </a>
            <a href="javascript:void(0);" class="center">
                <div>
                    <div class="plus">
                        <i class="iconfont icon-plus"></i>
                    </div>
                </div>
                <p>发布</p>
            </a>
            <a href="../html/show.html">
                <div>
                    <i class="iconfont icon-faxian-copy-copy"></i>
                </div>
                <p>发现</p>
            </a>
            <a href="../html/center.html">
                <div>
                    <i class="iconfont icon-user"></i>
                </div>
                <p>我</p>
            </a>
        </div>
        <div class="two-btn">
            <a href="../html/publish_want.html">雇主发布</a>
            <a href="../html/add_service.html">出租人发布</a>
        </div>
        <div class="order">
            <div class="left">
                <i class="iconfont icon-play"></i>
            </div>
            <div class="center">
                <span><i class="iconfont icon-vip"></i>会员自动抢单</span>
            </div>
            <div class="right">
                <a href="../html/order_set.html">
                    <i class="iconfont icon-shezhi"></i>
                    <p>设置</p>
                </a>
            </div>
        </div>
    </div>
</footer>
</body>
<script>
    $('.center .plus').click(function(){
        $('.two-btn').slideToggle();
        if($(this).hasClass('plus-active')){
            $(this).removeClass('plus-active');
            $(this).css({'transform':'rotate(0deg)'});
            $('.content').removeClass('filter');
            $('.order').slideDown();
        }else{
            $(this).addClass('plus-active');
            $(this).css({'transform':'rotate(45deg)'});
            $('.content').addClass('filter');
            $('.order').slideUp();
        }
    });
    $('.order .left').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active').find("i").removeClass('icon-pause').addClass('icon-play');
            $('.order .center span').html('<i class="iconfont icon-vip"></i>会员自动抢单');

        }else{
            $(this).addClass('active').find("i").removeClass('icon-play').addClass('icon-pause');
            $('.order .center span').html('正在抢单中...');
            openModalMask()
        }
    });
    $('.m-btn .cancel').click(function(){
        closeModalMask()
    })
</script>
<script>

    var myScroll,
            pullDownEl, pullDownOffset,
            pullUpEl, pullUpOffset,
            generatedCount = 0;

    /**
     * 下拉刷新 （自定义实现此方法）
     * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
     */
    function pullDownAction () {
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            var img = ['pic_lessor.png','pic_renter.png'];
            el = document.getElementById('list');

            for (i=0; i<2; i++) {
                var _html = '<a href="../html/task_detail.html"></a>'+
                '<div class="left face" style="background-image: url(../img/'+img[i]+')"></div>'+
                '<div class="center">'+
                '<div class="top">'+
                '<span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>'+
                '<span class="sex"><i class="iconfont icon-women"></i></span>'+
                '<span class="star"><i class="iconfont icon-star2"></i></span>'+
                '</div>'+
                '<div class="middle">任务标题</div>'+
                '<div class="bottom">￥280元</div>'+
                '</div>'+
                '<div class="right">'+
                '<div class="top">'+
                '<span class="service">生活服务</span>'+
                '<span class="ding">顶</span>'+
                '</div>'+
                '<div class="middle">1/5</div>'+
                '<div class="bottom">1小时前</div>'+
                '</div>';
                li = document.createElement('li');
                li.className += 'bottom-line';
                li.innerHTML = _html;
                el.insertBefore(li, el.childNodes[0]);
            }

            myScroll.refresh();		//数据加载完成后，调用界面更新方法   Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
    }

    /**
     * 滚动翻页 （自定义实现此方法）
     * myScroll.refresh();		// 数据加载完成后，调用界面更新方法
     */
//    function pullUpAction () {
//        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
//            var el, li, i;
//            el = document.getElementById('thelist');
//
//            for (i=0; i<3; i++) {
//                li = document.createElement('li');
//                li.innerText = 'Generated row ' + (++generatedCount);
//                el.appendChild(li, el.childNodes[0]);
//            }
//
//            myScroll.refresh();		// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
//        }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
//    }

    /**
     * 初始化iScroll控件
     */
    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;
//        pullUpEl = document.getElementById('pullUp');
//        pullUpOffset = pullUpEl.offsetHeight;

        myScroll = new iScroll('wrapper', {
            scrollbarClass: 'myScrollbar', /* 重要样式 */
            useTransition: true, /* 此属性不知用意，本人从true改为false */
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                }
//                else if (pullUpEl.className.match('loading')) {
//                    pullUpEl.className = '';
//                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
//                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                    this.minScrollY = -pullDownOffset;
                }
//                else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
//                    pullUpEl.className = 'flip';
//                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
//                    this.maxScrollY = this.maxScrollY;
//                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
//                    pullUpEl.className = '';
//                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
//                    this.maxScrollY = pullUpOffset;
//                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
                    pullDownAction();	// Execute custom function (ajax call?)
                }
//                else if (pullUpEl.className.match('flip')) {
//                    pullUpEl.className = 'loading';
//                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
//                    pullUpAction();	// Execute custom function (ajax call?)
//                }
            }
        });

        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }

    //初始化绑定iScroll控件
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);

</script>
</html>